<template>
  <div>
    <van-dialog
      v-model="dialogShow"
      :title="dialogTitle"
      :width="dialogWidth"
      :showConfirmButton="showConfirmButton"
      :showCancelButton="showCancelButton"
      confirmButtonText="确认"
      :confirmButtonColor="confirmButtonColor"
      cancelButtonText="取消"
      :cancelButtonColor="cancelButtonColor"
      :closeOnClickOverlay="closeOnClickOverlay"
      @confirm="confirm"
      @cancel="cancel"
      @open="open"
    >
      <div class="dialogContent">
        <slot></slot>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { Dialog } from 'vant';
// 弹窗组件-支持弹窗自定义内容
export default {
  name: "page1",
  components: {
    'van-dialog':Dialog
  },
  props: {
    // 控制弹窗显示
    dialogIsShow: {
      type: Boolean,
      require: true,
    },
    // 弹窗标题
    dialogTitle: {
      default: "提示",
      require: false,
    },
    // 弹窗宽度
    dialogWidth: {
      default: "320px",
      require: false,
    },
    // 是否显示确认按钮
    showConfirmButton: {
      default: true,
      require: false,
      type: Boolean,
    },
    // 是否显示取消按钮
    showCancelButton: {
      default: true,
      require: false,
      type: Boolean,
    },
    // 确认按钮颜色
    confirmButtonColor: {
      default: "#ee0a24",
      require: false,
      type: String,
    },
    // 取消按钮颜色
    cancelButtonColor: {
      default: "black",
      require: false,
      type: String,
    },
    // 点击遮罩层是否关闭弹窗
    closeOnClickOverlay: {
      default: false,
      require: false,
      type: Boolean,
    },
  },
  computed: {
    dialogShow: {
      get() {
        return this.dialogIsShow;
      },
      set(val) {
        this.$emit("update:dialogIsShow", val);
      },
    },
  },
  data() {
    return {};
  },

  methods: {
    confirm() {
      this.$emit("sureDialog");
    },
    cancel() {
      this.$emit("cancelDialog");
    },
    open() {
      this.$emit("openDialog");
    },
  },
};
</script>
<style lang="less" scoped>
.dialogContent {
  padding: 10px;
  // text-align: left;
  max-height: 900px;
  overflow-y: auto;
}
/deep/ .van-dialog {
  border-radius: 12px;
}
</style>